<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  chartId: string
}>()

const initChart = (data: any) => {
  const chartDom = document.getElementById(props.chartId);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.yAxis,
        type: 'bar'
      }
    ]
  };

  option && myChart.setOption(option);
}

defineExpose({ initChart })
</script>

<template>
  <div :id="chartId" style="width: 100%; height: 100%"></div>
</template>

<style scoped>

</style>
